<template>
  <div class="app-container home">

    <el-row :gutter="20">

      <el-col :span="8">
        <el-card style="height: 300px;">
          <div slot="header" class="clearfix">
            <span>账户信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-money"></i> 用户账号 ：<a> {{ user.username }}</a>
            </p>
            <p>
              <i class="el-icon-s-promotion"></i> 关联企业 ：{{ merchant.comName == '' ? '未添加' : merchant.comName }}<a></a>
              <el-button v-if="merchant.comName == ''" style="margin-left: 10px"
                         size="mini"
                         icon="el-icon-s-home"
                         plain
                         @click="tobcqyxx">点击去补充企业信息
              </el-button>
            </p>
            <p>
              <i class="el-icon-user-solid"></i> 联系电话 ：<a> {{ user.phonenumber }}</a>
              <el-button style="margin-left: 10px"
                         size="mini"
                         icon="el-icon-s-home"
                         plain
                         @click="toUpdata">修改
              </el-button>
            </p>

            <p>
              <i class="el-icon-money"></i> 邮箱 ：<a> {{ user.email }}</a>
            </p>
            <p>
              <i class="el-icon-money"></i> 余额 ：<a> {{ merchant.balance }}</a>
              <el-button style="margin-left: 10px"
                         type="primary"
                         size="mini"
                         icon="el-icon-cloudy"
                         plain
                         @click="goChongzhi">充值
              </el-button>
            </p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="update-log" style="height: 300px;">
          <div slot="header" class="clearfix">
            <span>接口信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 总调用量：<a> {{ zdyl }}</a>
            </p>
            <p>
              <i class="el-icon-s-promotion"></i> 商户号：<a> {{ merchant.merchantCode }}</a>
            </p>
            <p>
              <i class="el-icon-user-solid"></i> 密钥：<a @click="yc=!yc" v-if="yc">******</a> <a v-else @click="yc=!yc">
              {{ merchant.secretKey }}</a>
              <el-button style="margin-left: 10px"
                         type="primary"
                         size="mini"
                         icon="el-icon-cloudy"
                         plain
                         @click="updataSecrit">刷新
              </el-button>
            </p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="update-log" style="height: 300px;">
          <div slot="header" class="clearfix">
            <span>系列产品（扫一扫进入微信小程序）</span>
          </div>
          <div class="body">
            <img
              src="@/assets/images/_source=2.jpg"
              alt="donate"
              width="85%"/>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-divider/>
  </div>
</template>

<script>

  import {getMerchant, updateMerchantSecrit} from "@/api/payOrder/payOrder";

  import {getCount} from "@/api/jiekou/jiekou";

  export default {

    data() {
      return {
        user: null,
        dialogVisible: false,
        zdyl: 0,
        merchant: {
          comName: '',
          balance: '',
          merchantCode: '',
          secretKey: ''
        },
        ruleForm: {
          pass: ''
        },
        yc: true
      };
    },
    created() {
      this.user = this.$store.state.user
      this.getMerchantInfo()
    },

    methods: {
      getMerchantInfo() {
        getMerchant(this.user.id).then(response => {
            this.merchant = response.data
            getCount({
              merchantCode: this.merchant.merchantCode
            }).then(response => {
              this.zdyl = response.data
            })
          }
        );
      },

      tobcqyxx() {
        this.$router.push({path: "/user/profile", query: {zs: "merchant"}}).catch(() => {
        });
      },

      toUpdata() {
        this.$router.push({path: "/user/profile"}).catch(() => {
        });
      },

      goChongzhi() {
        this.$router.push({path: "account/accountCenter"}).catch(() => {
        });
      },

      updataSecrit() {
        var _this = this
        this.$modal.confirm('刷新密钥您之前的接口调用密钥将失效(请慎重)？').then(function () {
          // 发起刷新密钥
          updateMerchantSecrit({userId: _this.user.id}).then(response => {
            if (response.code == 200) {
              _this.getMerchantInfo()
              _this.$modal.msgSuccess("修改成功");
            }
          });
        });
      }

    }
  };
</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

